<template>
    <div class="content">
      <m-head title="教材目录"></m-head>
      <!--mescroll滚动区域的基本结构,为避免id重复导致的多次初始化,这里使用ref-->
      <div ref="mescroll" class="mescroll">
        <div class="list" id="list">
<div  v-if="!isMine">

          <div class="item" v-for="(item, index) in list" :key="index">
            <div class="mask" v-show="!item.is_free" @click="showTip()"></div>
            
    <div v-if="item.info === ''">

            <div class="mcon" @click="$router.push({path: '/myjiaocaidetail', query: {textbook_id: item.textbook_id, id: item.id}})">
              <img :src="item.cover" alt="" class="pic">
              <div class="info">
                <div class="title">{{item.name}}</div>
<!--         <div class="intro">{{item.content}}</div>-->
              </div>
              <span class="arrow"></span>
            </div>

    </div>

<div v-else>
               <div class="mcon">
              <img :src="item.cover" alt="" class="pic">
              <div class="info">
                <div class="title" style='  font-size: .55rem;color: #000;  margin: 0 0 .1rem;'>{{item.name}}</div>
<!--                <div class="intro">{{item.content}}</div>-->
              </div>
            </div>
    </div>


          </div>
        </div>
<div v-else>
          <div class="item" v-for="(item, index) in list" :key="index">
        
            
    <div v-if="item.info === ''">

            <div class="mcon" @click="$router.push({path: '/myjiaocaidetail', query: {textbook_id: item.textbook_id, id: item.id}})">
              <img :src="item.cover" alt="" class="pic">
              <div class="info">
                <div class="title">{{item.name}}</div>
<!--         <div class="intro">{{item.content}}</div>-->
              </div>
              <span class="arrow"></span>
            </div>

    </div>

<div v-else>
               <div class="mcon">
              <img :src="item.cover" alt="" class="pic">
              <div class="info">
                <div class="title" style='  font-size: .55rem;color: #000;  margin: 0 0 .1rem;'>{{item.name}}</div>
<!--                <div class="intro">{{item.content}}</div>-->
              </div>
            </div>
    </div>


          </div>

</div>
 </div>


      </div>
      <div class="fixBottom" v-if="!isMine">
        <button class="buybtn" @click="$router.push({path: '/order', query: {id: textbook_id, type: 2}})">立即购买</button>
      </div>
      <div class="tips" :class="{'showTip': isShowTip}">
        <div><span>请先购买课程</span></div>
      </div>
    </div>
</template>

<script>
import MHead from './MHeader'
import * as user from '../api/user'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
export default {
  name: 'jiaocaicontent',
  components: {
    'm-head': MHead
  },
  data: function () {
    return {
      textbook_id: 0,
      isMine: false,
      isShowTip: false,
      list: [],
      page: 1,
      mescroll:null,
    }
  },
  mounted () {
    this.textbook_id = this.$route.query.id
    this.isMine = this.$route.query.isMine
    console.log(this.textbook_id)
    // this.getTextbookCatalog(this.textbook_id)

    let that = this
    //创建MeScroll对象
    this.mescroll = new MeScroll(this.$refs.mescroll, { // 在vue的mounted生命周期初始化mescroll,确保此处配置的ref有值
      down:{
        use:false
      }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则down可不用写了)
      up: {
        callback: this.upCallback,
        // 以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10, //每页数据条数,默认10
          time:1
        },
        htmlNodata: '<p class="upwarp-nodata">亲,没有更多数据了~</p>',
        noMoreSize: 5, //如果列表已无数据,可设置列表总数大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        toTop: {
          //回到顶部按钮
          src: null, //图片路径,默认null,支持网络图
          offset: 1000, //列表滚动1000px才显示回到顶部按钮
        },
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          warpId:	"xxid", //父布局的id (1.3.5版本支持传入dom元素)
          icon: null, //图标,默认null,支持网络图
          tip: "暂无相关数据~", //提示
        }
      }
    });
  },
  methods: {
    getTextbookCatalog (id) {
      user.getJiaocaiCatalog(id)
        .then(res => {
          console.log('教材目录:', res.data)
          this.textBookCatalog.push(res.data)
        })
    },
    upCallback (page) {
      //联网请求
      let that = this
      console.log(that.list)
      user.getJiaocaiCatalogMenu(that.textbook_id, {page: that.page, perPage: 10})
        .then(res => {
          //如果是第一页需手动制空列表
          //把请求到的数据添加到列表
          that.list = that.list.concat(res.data)
          that.page += 1
          //数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            this.mescroll.endSuccess(res.data.length)
          })
          this.mescroll.endErr()
        }).catch((e) => {
        //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
        this.mescroll.endErr()
      })
    },
    showTip: function () {
      this.isShowTip = true
      var that = this
      setTimeout(function () {
        that.isShowTip = false
      }, 1000)
    },
  }
}
</script>

<style scoped>
.tips{
  position: fixed;
  width: 3.5rem;
  height: 1.2rem;
  left: 0;
  right: 0;
  top: 20%;
  margin: 0 auto;
  display: none;
}
.tips.showTip{
  display: block;
}
.tips span{
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
  font-size: .4rem;
  display: block;
  background: rgba(0,0,0,.6);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #fff;
}
.list{
  padding-bottom: 1.1rem;
}
.item{
  border-bottom: 1px solid #e1e1e1;
  padding: .3rem;
  position: relative;
}
.mcon{
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.mask{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.1);
}
.mask.mf{
  display: none;
}
.pic{
  width: 1.2rem;
  height: 1.2rem;
  margin-right: .3rem;
  border: 1px solid #f1f1f1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.info{
  width: 7.7rem;
}
.info .title{
  font-size: .42rem;
  color: #000;
  margin: 0 0 .1rem;
}
.info .intro{
  font-size: .34rem;
  color: #555;
  line-height: .56rem;
}
.arrow{
  right: .3rem;
}
.fixBottom{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.1rem;
}
.buybtn{
  height: 1.1rem;
  line-height: 1.1rem;
  background: #007aff;
  color: #fff;
  text-align: center;
  font-size: .4rem;
  border: none;
  display: block;
  width: 100%;
}

.mescroll {
  position: fixed;
  top: 44px;
  bottom: 0;
  height: auto;
}
</style>